<template>
	<view class="main-content">
		<view class="bg-white area u-padding-bottom-18 u-padding-top-16">
			<view class="xxl bold u-text-center u-padding-18 u-margin-bottom-16 ">
				还款测算
			</view>
			<u-form :model="form" ref="uForm" :rules="rules" :error-type="['toast']">
				<view class="row u-margin-bottom-16">
					<u-form-item prop="money" class="from-item u-margin-right-16 u-border-radius-10" label="贷款金额"
						labelWidth="160" :border-bottom="false">
						<u-input v-model="form.money" placeholder="请输入金额" />
					</u-form-item>
					<u-subsection :list="[{name:'元'},{name:'万'}]" :current="form.moneyUnit"
						@change="(e) => {form.moneyUnit = e}" style="width: 20vw;"
						active-color="#66a6ff"></u-subsection>
				</view>
				<view class="row u-margin-bottom-16">
					<u-form-item prop="period" class="from-item u-margin-right-16 u-border-radius-10" label="贷款期限"
						labelWidth="160" :border-bottom="false">
						<u-input v-model="form.period" placeholder="请输入期数" />
					</u-form-item>
					<u-subsection :list="[{name:'月'},{name:'年'}]" :current="form.periodUnit"
						@change="(e) => {form.periodUnit = e}" style="width: 20vw;"
						active-color="#66a6ff"></u-subsection>
				</view>
				<view class="row u-margin-bottom-16">
					<u-form-item prop="rate" class="from-item u-margin-right-16 u-border-radius-10" label="利率(%)"
						labelWidth="160" :border-bottom="false">
						<u-input v-model="form.rate" placeholder="请输入利率" />
					</u-form-item>
					<u-subsection :list="[{name:'月'},{name:'年'}]" :current="form.rateUnit"
						@change="(e) => {form.rateUnit = e}" style="width: 20vw;" active-color="#66a6ff"></u-subsection>
				</view>
				<u-form-item prop="modeRepayment" class="from-item u-border-radius-10" label="还款方式" labelWidth="160"
					@click="modeRepaymentShowStatus = true" :border-bottom="false">
					<u-input v-model="modeRepaymentText" placeholder="请选择还款方式" disabled="" type="select"
						@click="modeRepaymentShowStatus = true" />
				</u-form-item>

				<u-action-sheet :list="modeRepaymentLists" v-model="modeRepaymentShowStatus"
					@click="selectModeRepayment"></u-action-sheet>

				<u-button @click="submit" type="primary"
					:custom-style="{backgroundColor: '#4990fa',margin:'5vh 20rpx 10rpx 20rpx'}"
					shape="circle">计算</u-button>

			</u-form>
		</view>

	</view>
</template>

<script>
	import {
		paramsToStr
	} from '@/utils/tools';
	export default {
		data() {
			return {
				form: {
					money: '',
					moneyUnit: 0,
					period: '',
					periodUnit: 0,
					rate: '',
					rateUnit: 1,
					modeRepayment: 0,
				},
				modeRepaymentText: '等额本息',
				rules: {
					money: [{
							required: true,
							message: '请输入金额',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								let money = value;

								if (this.form.moneyUnit == 1) {
									money = value * 10000;
								}
								if (money < 500 || money > 10000000) {
									return false;
								} else {
									return true;
								}
							},
							message: '贷款金额不得小于500大于1亿'
						},
					],
					period: [{
							required: true,
							message: '请输入期数',
							trigger: ['blur', 'change']
						},
						{
							type: 'number',
							message: '请检查期数内容'
						},
						{
							validator: (rule, value, callback) => {
								let month = value;

								if (this.form.periodUnit == 1) {
									month = value * 12;
								}
								if (month < 1 || month > 600) {
									return false;
								} else {
									return true;
								}
							},
							message: '贷款期限不能超过600个月或小于1个月'
						},
					],
					rate: [{
							required: true,
							message: '请输入利率',
							trigger: ['blur', 'change']
						},
						{
							type: 'number',
							message: '请检查利率内容'
						},
						{
							validator: (rule, value, callback) => {
								let rate = value;

								if (this.form.periodUnit == 1) {
									rate = value * 10000;
								}
								if (rate < 0 || rate > 50) {
									return false;
								} else {
									return true;
								}
							},
							message: '贷款利息不得高于50%或小于0"'
						},
					]
				},
				modeRepaymentLists: [{
					text: "等额本息",
					subText: "月供每月相同，本金逐月递增，利息逐月递减"
				}, {
					text: "等额本金",
					subText: "月供每月递减，本金每月相同，利息每月递减"
				}, {
					text: "等本等息",
					subText: "月供，本金，利息每月相同"
				}, {
					text: "先息后本",
					subText: "每月还固定利息，到期还全部本金"
				}],
				modeRepaymentShowStatus: false
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			selectModeRepayment(e) {
				this.modeRepaymentText = this.modeRepaymentLists[e].text
				this.form.modeRepayment = e
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let parameters = {
							money: this.form.money,
							period: this.form.period,
							rate: this.form.rate,
							moderepayment: this.form.modeRepayment
						};
						if (this.form.moneyUnit == 1) parameters.money = this.form.money * 10000;
						if (this.form.periodUnit == 1) parameters.period = this.form.period * 12;
						if (this.form.rateUnit == 1) parameters.rate = this.form.rate / 12;
						uni.navigateTo({
							url: '/pages/loans/calculate/result' + paramsToStr(parameters)
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-size: 100% 100vh;
		background-image: linear-gradient(to bottom, #66a6ff 49px, #F6F6F6 30%);
		background-repeat: no-repeat;
	}

	.main-content {
		padding: 5vh 3vw 3vw;
	}

	.area {
		padding: 0 2vw;
		border-radius: 10rpx;
	}

	.from-item {
		padding: 8rpx 16rpx;
		background-color: #f6f6f6;
	}

	.u-border-radius-10 {
		border-radius: 10rpx;
	}
</style>